<template>
  <div class="hp_box">
    <!-- 高压科 -->
    <section class="content">
      <div class="model_title"></div>
      <div class="bg_cover">
        <div class="bg_name">厂端机台能耗报告</div>
        <div class="bg_time">{{ currentdate }}</div>
      </div>
      <div class="bg_cover_jitai">
        <div class="bg_cover_jitai-son">
          <div class="bg_cover_jitai-son1">
            <span>上报机台总数：{{ Boarddata.allNum }}（台）,</span>
            <span class="soan-span">Array：{{ Boarddata.ARRAY }}（台）,</span>
            <span class="soan-span">EL：{{ Boarddata.EL }}（台）</span>
            <span class="soan-span">TOUCH：{{ Boarddata.TOUCH }}（台）,</span>
            <span class="soan-span">MOD：{{ Boarddata.MOD }}（台）,</span>
          </div>
          <div class="bg_cover_jitai-son2">
            <span class="son2-son son2-son1"
              >W{{ Ratiodata.week }}周能耗用量：</span
            >
            <span class="son2-son">电：{{ Ratiodata.elec }}（kWh）</span>
            <span class="son2-son"
              >环比上周：{{ Ratiodata.elecRingRatio }}</span
            >
            <span class="son2-son">水：{{ Ratiodata.water }}（m³）</span>
            <span class="son2-son"
              >环比上周：{{ Ratiodata.waterRingRatio }}</span
            >
            <span class="son2-son">气：{{ Ratiodata.gas }}（m³）</span>
            <span class="son2-son">环比上周：{{ Ratiodata.gasRingRatio }}</span>
          </div>
        </div>
      </div>
      <div class="model_title">各厂能耗占比</div>
      <div class="echart_card">
        <div class="card_title">
          各厂电用量占比，饼状图,各厂电用量趋势，折线图
        </div>
        <div class="echarts_data chart_height t4hp_height">
          <vechart :options="piesHpOptionData" />
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <vechart :options="factoryEleOptionData" />
        </div>
      </div>

      <div class="echart_card">
        <div class="card_title">
          各厂水用量占比，饼状图，各厂水用量趋势，折线图
        </div>
        <div class="echarts_data chart_height t4hp_height">
          <vechart :options="waterpieoptiondata" />
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <vechart :options="waterlineoptiondata" />
        </div>
      </div>
      <div class="echart_card">
        <div class="card_title">
          各厂气用量占比，饼状图,各厂气用量趋势，折线图
        </div>
        <div class="echarts_data chart_height t4hp_height">
          <vechart :options="gaspieoptiondata" />
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <vechart :options="gaslineoptiondata" />
        </div>
      </div>

      <div class="echart_card">
        <div class="card_title">ARRAY能耗概览</div>
        <div class="echarts_data chart_height t4hp_height">
          <div class="wenzimiaoshu-parent">
            <div class="wenzimiaoshu">
              W <span>{{ Ratiodata.week }}</span
              >周EL耗能概览,
            </div>
            <div class="wenzimiaoshu">
              用电 <span>{{ Energydata.ARRAY.elec }}</span> （kWh）,
            </div>
            <div class="wenzimiaoshu">
              电量环比 <span>{{ Energydata.ARRAY.elecMultiply }}</span> ,
            </div>
            <div class="wenzimiaoshu">
              电量-周平均值
              <span>{{ Energydata.ARRAY.elecAvgs }}</span> （kWh）,
            </div>

            <div class="wenzimiaoshu">
              用水 <span>{{ Energydata.ARRAY.water }}</span> （m³）,
            </div>
            <div class="wenzimiaoshu">
              水环比 <span>{{ Energydata.ARRAY.waterMultiply }}</span> ,
            </div>
            <div class="wenzimiaoshu">
              水-周平均值<span>{{ Energydata.ARRAY.waterAvgs }}</span> （m³）,
            </div>

            <div class="wenzimiaoshu">
              用气 <span>{{ Energydata.ARRAY.gas }}</span
              >（m³）,
            </div>
            <div class="wenzimiaoshu">
              用环比 <span>{{ Energydata.ARRAY.gasMultiply }}</span
              >,
            </div>
            <div class="wenzimiaoshu">
              气-周平均值 <span>{{ Energydata.ARRAY.gasAvgs }}</span
              >（m³）,
            </div>
            <div class="wenzimiaoshu">
              上报机台个数：<span>{{ Energydata.ARRAY.machine }}</span>
            </div>
          </div>
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <div class="t4hp_height1-center">ARRAY各科室用电量排名</div>
          <vechart :options="columndata" />
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <div class="t4hp_height1-center">ARRAY各科室用水量排名</div>
          <vechart :options="arrwaterdata" />
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <div class="t4hp_height1-center">ARRAY各科室用气量排名</div>
          <vechart :options="arrgasdata" />
        </div>

        <div class="echart_card-son">
          <div class="echart_card-thead">
            <table border="1" cellspacing="0" width="100%">
              <tr>
                <th>期数</th>
                <th>科室</th>
                <th>Lineid</th>
                <th>Eqid</th>
                <th>电用量（kWh）</th>
                <th>水用量（m³）</th>
                <th>气用量（m³）</th>
              </tr>

              <tr v-for="(item, index) in Formdata.array" :key="index">
                <td>{{ item.week }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.lindid }}</td>
                <td>{{ item.eqid }}</td>
                <td>{{ item.elec }}</td>
                <td>{{ item.water }}</td>
                <td>{{ item.gas }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <div class="echart_card">
        <div class="card_title">EL能耗概览</div>
        <div class="echarts_data chart_height t4hp_height">
          <div class="wenzimiaoshu-parent">
            <div class="wenzimiaoshu">
              W <span>{{ Ratiodata.week }}</span
              >周EL耗能概览,
            </div>
            <div class="wenzimiaoshu">
              用电 <span>{{ Energydata.EL.elec }}</span> （kWh）,
            </div>
            <div class="wenzimiaoshu">
              电量环比 <span>{{ Energydata.EL.elecMultiply }}</span>
            </div>
            <div class="wenzimiaoshu">
              电-周平均值 <span>{{ Energydata.EL.elecAvgs }}</span> （kWh）,
            </div>
            <div class="wenzimiaoshu">
              用水 <span>{{ Energydata.EL.water }}</span> （m³）,
            </div>
            <div class="wenzimiaoshu">
              水环比 <span>{{ Energydata.EL.waterMultiply }}</span> ,
            </div>
            <div class="wenzimiaoshu">
              水周平均值 <span>{{ Energydata.EL.waterAvgs }}</span> （m³）,
            </div>
            <div class="wenzimiaoshu">
              用气 <span>{{ Energydata.EL.gas }}</span
              >（m³）,
            </div>
            <div class="wenzimiaoshu">
              气环比 <span>{{ Energydata.EL.gasMultiply }}</span
              >,
            </div>
            <div class="wenzimiaoshu">
              气-周平均值 <span>{{ Energydata.EL.gasAvgs }}</span
              >（m³）,
            </div>
            <div class="wenzimiaoshu">
              上报机台个数：<span>{{ Energydata.EL.machine }}</span>
            </div>
          </div>
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <div class="t4hp_height1-center">EL各科室用电量排名</div>
          <vechart :options="ELElecfun" />
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <div class="t4hp_height1-center">EL各科室用电水排名</div>
          <vechart :options="ELwatercfun" />
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <div class="t4hp_height1-center">EL各科室用气量排名</div>
          <vechart :options="ELgascfun" />
        </div>
        <div class="echart_card-son">
          <div class="echart_card-thead">
            <table border="1" cellspacing="0" width="100%">
              <tr>
                <th>期数</th>
                <th>科室</th>
                <th>Lineid</th>
                <th>Eqid</th>
                <th>电用量（kWh）</th>
                <th>水用量（m³）</th>
                <th>气用量（m³）</th>
              </tr>
              <tr v-for="(item, index) in Formdata.el" :key="index">
                <td>{{ item.week }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.lindid }}</td>
                <td>{{ item.eqid }}</td>
                <td>{{ item.elec }}</td>
                <td>{{ item.water }}</td>
                <td>{{ item.gas }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="echart_card">
        <div class="card_title">MOD能耗概览</div>
        <div class="echarts_data chart_height t4hp_height">
          <div class="wenzimiaoshu-parent">
            <div class="wenzimiaoshu">
              W <span>{{ Ratiodata.week }}</span
              >周EL耗能概览,
            </div>
            <div class="wenzimiaoshu">
              用电
              <span>{{ Energydata.MOD.elec }}</span>
              （kWh）,
            </div>
            <div class="wenzimiaoshu">
              电量环比
              <span>{{ Energydata.MOD.elecMultiply }}</span>
              ,
            </div>
            <div class="wenzimiaoshu">
              周平均值
              <span>{{ Energydata.MOD.elecAvgs }}</span>
              （kWh）,
            </div>
            <div class="wenzimiaoshu">
              上报机台个数：<span>{{ Energydata.MOD.machine }}</span>
            </div>
          </div>
        </div>
        <div class="echarts_data chart_height t4hp_height t4hp_height1">
          <div class="t4hp_height1-center">MOD各科室用电量排名</div>
          <vechart :options="MODelefunc" />
        </div>

        <div class="echart_card-son">
          <div class="echart_card-thead">
            <table border="1" cellspacing="0" width="100%">
              <tr>
                <th>期数</th>
                <th>科室</th>
                <th>Lineid</th>
                <th>Eqid</th>
                <th>电用量（kWh）</th>
              </tr>
              <tr v-for="(item, index) in Formdata.mod" :key="index">
                <td>{{ item.week }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.lindid }}</td>
                <td>{{ item.eqid }}</td>
                <td>{{ item.elec }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <div class="echart_card">
        <div class="card_title">能耗异常分析</div>
        <div class="table-main">
          <el-table
            :data="listtableData"
            border
            :span-method="objectSpanMethod"
            style="width: 100%"
          >
            <el-table-column prop="energy" label="能源形势" align="center">
            </el-table-column>
            <el-table-column prop="machine" align="center" label="机台">
            </el-table-column>
            <el-table-column
              prop="exceptionsnum"
              align="center"
              label="异常次数"
            >
            </el-table-column>
            <el-table-column
              prop="exceptionstype"
              align="center"
              label="异常种类"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="echart_card">
        <div class="card_title">能源能耗异常分布</div>
        <div class="table-main">
          <div class="echarts_data chart_height">
            <vechart :options="queryEnergydata" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import apis from "@/api/api.js";
import electricdata from "../jsonmodule/factory/electricdata.json";
import Linelectricdata from "../jsonmodule/factory/Linelectricdata.json";
import columnlectricdata from "../jsonmodule/factory/columnlectricdata.json";

export default {
  components: {
    vechart: () => import("@/components/charts/Vechart.vue"),
    mytable: () => import("../common/Mytable.vue"),
  },
  data() {
    return {
      //
      electricdata: electricdata,
      Linelectricdata: Linelectricdata,
      columnlectricdata: columnlectricdata,
      currentdate: "",
      changdata: ["ARRAY", "EL", "MOD", "TOUCH"],
      waterdata: "",
      Gasdata: "",
      diandata: "",
      Ratiodata: {},
      Boarddata: {},
      arryElecdata: {},
      searcWaterdata: {},
      ArrayGasdata: {},
      ELElecdata: {},
      ELWaterdata: {},
      elgasdata: {},
      MODElecdata: {},
      Energydata: {
        EL: {
          elec: "_",
          water: "_",
          gas: "_",
        },
        ARRAY: { elec: "_", water: "_", gas: "_" },
        MOD: { elec: "_", water: "_", gas: "_" },
      },
      listtableData: [],
      queryEnergySpreaddata1: {},
      Formdata: {},
      spanArr: [],

      //
      yicdataname: [],
      yicdatavalue: [],
    };
  },
  created() {
    this.initData();
    this.curentweekdate();
  },
  methods: {
    async initData() {
      const searchFactoryElectricityByTimes =
        await apis.searchFactoryElectricityByTimes();
      this.diandata = searchFactoryElectricityByTimes.data.data;
      const searchWeekToWater = await apis.searchWeekToWater();
      this.waterdata = searchWeekToWater.data.data;
      const searchWeekGas = await apis.searchWeekGas();
      this.Gasdata = searchWeekGas.data.data;
      const queryRingRatio = await apis.queryRingRatio();
      this.Ratiodata = queryRingRatio.data.data;
      const queryEachFactoryBoard = await apis.queryEachFactoryBoard();
      this.Boarddata = queryEachFactoryBoard.data.data;
      const queryArrayElec = await apis.queryArrayElec();
      this.arryElecdata = queryArrayElec.data.data;
      const searchArrayWater = await apis.searchArrayWater();
      this.searcWaterdata = searchArrayWater.data.data;
      const searchArrayGas = await apis.searchArrayGas();
      this.ArrayGasdata = searchArrayGas.data.data;
      const queryELElec = await apis.queryELElec();
      this.ELElecdata = queryELElec.data.data;
      const searchELWater = await apis.searchELWater();
      this.ELWaterdata = searchELWater.data.data;
      const searchElGas = await apis.searchElGas();
      this.elgasdata = searchElGas.data.data;
      const queryMODElec = await apis.queryMODElec();
      this.MODElecdata = queryMODElec.data.data;
      const queryEnergy = await apis.queryEnergy();
      this.Energydata = queryEnergy.data.data;
      // console.log(this.Energydata);
      const queryForm = await apis.queryForm();
      this.Formdata = queryForm.data.data;

      //异常分析
      const queryEqIdEnergylist = await apis.queryEqIdEnergy();
      this.listtableData = queryEqIdEnergylist.data.data;
      console.log(this.listtableData, "异常分析");
      this.listtableData.map((v) => {
        if (v.energy == "gas") {
          v.energy = "电";
        } else if (v.energy == "water") {
          v.energy = "纯水(DIW+UPW)";
        } else if (v.energy == "elec") {
          v.energy = "CDA";
        }
      });

      //能源能耗异常分布
      const queryEnergySpreaddata = await apis.queryEnergySpread();
      this.queryEnergySpreaddata1 = queryEnergySpreaddata.data.data;
      console.log(this.queryEnergySpreaddata1, "能源能耗异常分布");

      this.yicdataname = this.queryEnergySpreaddata1.name;
      this.yicdatavalue = this.queryEnergySpreaddata1.value;

      for (var i = 0; i < this.yicdataname.length; i++) {
        if (this.yicdataname[i] == "Electricity") {
          this.yicdataname[i] = "电";
        } else if (this.yicdataname[i] == "Liquid(UPW)") {
          this.yicdataname[i] = "UPW";
        } else if (this.yicdataname[i] == "Gas(CDA)") {
          this.yicdataname[i] = "CDA";
        } else if (this.yicdataname[i] == "Liquid(DIW)") {
          this.yicdataname[i] = "DIW";
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 5 === 0) {
          return {
            rowspan: 5,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    async curentweekdate() {
      const returnDate = await apis.returnDate();
      this.currentdate = returnDate.data.content.zhouqi;
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 5 === 0) {
          return {
            rowspan: 5,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },

  computed: {
    //电
    factoryEleOptionData() {
      if (this.diandata && this.diandata.time) {
        return {
          ...this.Linelectricdata,
          yAxis: {
            name: "单位(Kwh)",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.diandata.time,
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
          },
          legend: {
            data: ["ARRAY", "EL", "MOD", "TOUCH"],
          },
          series: [
            {
              name: "ARRAY",
              type: "line",
              stack: "总量",
              data: this.diandata.ARRAY,
            },
            {
              name: "EL",
              type: "line",
              stack: "总量",
              data: this.diandata.EL,
            },
            {
              name: "MOD",
              type: "line",
              stack: "总量",
              data: this.diandata.MOD,
            },
            {
              name: "TOUCH",
              type: "line",
              stack: "总量",
              data: this.diandata.TOUCH,
            },
          ],
        };
      } else {
        return this.Linelectricdata;
      }
    },
    piesHpOptionData() {
      if (this.diandata && this.diandata.countNum) {
        return {
          ...this.electricdata,

          series: {
            ...this.electricdata.series[0],
            name: "各厂用电量占比",
            data: [
              {
                value: this.diandata.countNum.ARRAY,
                name: "ARRAY",
              },
              {
                value: this.diandata.countNum.EL,
                name: "EL",
              },
              {
                value: this.diandata.countNum.MOD,
                name: "MOD",
              },
              {
                value: this.diandata.countNum.TOUCH,
                name: "TOUCH",
              },
            ],
          },
        };
      } else {
        return this.electricdata;
      }
    },
    //水
    waterpieoptiondata() {
      if (this.waterdata && this.waterdata.time) {
        return {
          ...this.electricdata,

          series: {
            ...this.electricdata.series[0],
            name: "各厂用电量占比",
            data: [
              {
                value: this.waterdata.countNum.ARRAY,
                name: "ARRAY",
              },
              {
                value: this.waterdata.countNum.EL,
                name: "EL",
              },
              {
                value: this.waterdata.countNum.MOD,
                name: "MOD",
              },
              {
                value: this.waterdata.countNum.TOUCH,
                name: "TOUCH",
              },
            ],
          },
        };
      } else {
        return this.electricdata;
      }
    },
    waterlineoptiondata() {
      if (this.waterdata && this.waterdata.countNum) {
        return {
          ...this.Linelectricdata,
          yAxis: {
            name: "单位(Kwh)",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.waterdata.time,
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
          },
          legend: {
            data: ["ARRAY", "EL", "MOD", "TOUCH"],
          },
          series: [
            {
              name: "ARRAY",
              type: "line",
              stack: "总量",
              data: this.waterdata.ARRAY,
            },
            {
              name: "EL",
              type: "line",
              stack: "总量",
              data: this.waterdata.EL,
            },
            {
              name: "MOD",
              type: "line",
              stack: "总量",
              data: this.waterdata.MOD,
            },
            {
              name: "TOUCH",
              type: "line",
              stack: "总量",
              data: this.waterdata.TOUCH,
            },
          ],
        };
      } else {
        return this.Linelectricdata;
      }
    },
    //气
    gaspieoptiondata() {
      if (this.Gasdata && this.Gasdata.time) {
        return {
          ...this.electricdata,

          series: {
            ...this.electricdata.series[0],
            name: "各厂用电量占比",
            data: [
              {
                value: this.Gasdata.countNum.ARRAY,
                name: "ARRAY",
              },
              {
                value: this.Gasdata.countNum.EL,
                name: "EL",
              },
              {
                value: this.Gasdata.countNum.MOD,
                name: "MOD",
              },
              {
                value: this.Gasdata.countNum.TOUCH,
                name: "TOUCH",
              },
            ],
          },
        };
      } else {
        return this.electricdata;
      }
    },
    gaslineoptiondata() {
      if (this.Gasdata && this.Gasdata.countNum) {
        return {
          ...this.Linelectricdata,
          yAxis: {
            name: "单位(Kwh)",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.Gasdata.time,
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
          },
          legend: {
            data: ["ARRAY", "EL", "MOD", "TOUCH"],
          },
          series: [
            {
              name: "ARRAY",
              type: "line",
              stack: "总量",
              data: this.Gasdata.ARRAY,
            },
            {
              name: "EL",
              type: "line",
              stack: "总量",
              data: this.Gasdata.EL,
            },
            {
              name: "MOD",
              type: "line",
              stack: "总量",
              data: this.Gasdata.MOD,
            },
            {
              name: "TOUCH",
              type: "line",
              stack: "总量",
              data: this.Gasdata.TOUCH,
            },
          ],
        };
      } else {
        return this.Linelectricdata;
      }
    },
    //ARRAY
    columndata() {
      if (this.arryElecdata && this.arryElecdata.name) {
        // console.log(this.arryElecdata.value);
        return {
          ...this.columnlectricdata,
          yAxis: {
            name: "单位(Kwh)",
          },
          xAxis: {
            ...this.columnlectricdata.xAxis,
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
            data: this.arryElecdata.name,
          },
          series: [
            {
              name: "ARRAY电",
              type: "bar",
              barWidth: "60%",
              data: this.arryElecdata.value,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                  color: "#F48E2C",
                },
              },
            },
          ],
        };
      } else {
        return this.columnlectricdata;
      }
    },
    arrwaterdata() {
      if (this.searcWaterdata && this.searcWaterdata.name) {
        // console.log(this.searcWaterdata.value);
        return {
          ...this.columnlectricdata,
          grid: [
            {
              top: "8%",
              left: "12%",
              bottom: "20%",
            },
          ],
          yAxis: {
            name: "单位(m³)",
          },
          xAxis: {
            ...this.columnlectricdata.xAxis,
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
            data: this.searcWaterdata.name,
          },
          series: [
            {
              name: "ARRAY水",
              type: "bar",
              barWidth: "60%",
              data: this.searcWaterdata.value,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                  color: "#0af",
                },
              },
            },
          ],
        };
      } else {
        return this.columnlectricdata;
      }
    },
    arrgasdata() {
      if (this.ArrayGasdata && this.ArrayGasdata.name) {
        // console.log(this.searcWaterdata.value);
        return {
          ...this.columnlectricdata,
          yAxis: {
            name: "单位(m³)",
          },
          xAxis: {
            ...this.columnlectricdata.xAxis,
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
            data: this.ArrayGasdata.name,
          },
          grid: [
            {
              top: "8%",
              left: "12%",
              bottom: "20%",
            },
          ],
          series: [
            {
              name: "ARRAY气",
              type: "bar",
              barWidth: "60%",
              data: this.ArrayGasdata.value,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                  color: "#97D1D2",
                },
              },
            },
          ],
        };
      } else {
        return this.columnlectricdata;
      }
    },
    //EL
    ELElecfun() {
      if (this.ELElecdata && this.ELElecdata.name) {
        // console.log(this.searcWaterdata.value);
        return {
          ...this.columnlectricdata,
          yAxis: {
            name: "单位(Kwh)",
          },
          grid: [
            {
              top: "8%",
              left: "12%",
              bottom: "20%",
            },
          ],
          xAxis: {
            ...this.columnlectricdata.xAxis,
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
            data: this.ELElecdata.name,
          },
          series: [
            {
              name: "EL电",
              type: "bar",
              barWidth: "25%",
              data: this.ELElecdata.value,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                  color: "#F48E2C",
                },
              },
            },
          ],
        };
      } else {
        return this.columnlectricdata;
      }
    },
    ELwatercfun() {
      if (this.ELWaterdata && this.ELWaterdata.name) {
        // console.log(this.searcWaterdata.value);
        return {
          ...this.columnlectricdata,
          yAxis: {
            name: "单位(m³)",
          },
          grid: [
            {
              top: "8%",
              left: "12%",
              bottom: "20%",
            },
          ],
          xAxis: {
            ...this.columnlectricdata.xAxis,
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
            data: this.ELWaterdata.name,
          },
          series: [
            {
              name: "EL水",
              type: "bar",
              barWidth: "18%",
              data: this.ELWaterdata.value,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                  color: "#0af",
                },
              },
            },
          ],
        };
      } else {
        return this.columnlectricdata;
      }
    },
    ELgascfun() {
      if (this.elgasdata && this.elgasdata.name) {
        // console.log(this.searcWaterdata.value);
        return {
          ...this.columnlectricdata,
          yAxis: {
            name: "单位(m³)",
          },
          grid: [
            {
              top: "8%",
              left: "12%",
              bottom: "20%",
            },
          ],
          xAxis: {
            ...this.columnlectricdata.xAxis,
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
            data: this.elgasdata.name,
          },
          series: [
            {
              name: "EL气",
              type: "bar",
              barWidth: "25%",
              data: this.elgasdata.value,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                  color: "#97D1D2",
                },
              },
            },
          ],
        };
      } else {
        return this.columnlectricdata;
      }
    },
    //MOD
    MODelefunc() {
      if (this.MODElecdata && this.MODElecdata.name) {
        // console.log(this.searcWaterdata.value);
        return {
          ...this.columnlectricdata,
          yAxis: {
            name: "单位(Kwh)",
          },
          grid: [
            {
              top: "8%",
              left: "12%",
              bottom: "20%",
            },
          ],
          xAxis: {
            ...this.columnlectricdata.xAxis,
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
            data: this.MODElecdata.name,
          },
          series: [
            {
              name: "EL电",
              type: "bar",
              barWidth: "30%",
              data: this.MODElecdata.value,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                  color: "#F48E2C",
                },
              },
            },
          ],
        };
      } else {
        return this.columnlectricdata;
      }
    },

    //能源能耗异常分布
    queryEnergydata() {
      if (this.MODElecdata && this.MODElecdata.name) {
        // console.log(this.searcWaterdata.value);
        return {
          ...this.columnlectricdata,
          yAxis: {
            name: "次数",
          },
          grid: [
            {
              top: "12%",
              left: "12%",
              bottom: "20%",
            },
          ],
          xAxis: {
            ...this.columnlectricdata.xAxis,
            // axisLabel: {
            //   interval: 0,
            //   rotate: 90,
            // },
            data: this.yicdataname,
          },
          series: [
            {
              type: "bar",
              barWidth: "10%",
              data: this.yicdatavalue,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                  color: "#F48E2C",
                },
              },
            },
          ],
        };
      } else {
        return this.columnlectricdata;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.hp_box {
  .content {
    margin: 0 auto;
    width: 1280px;
    background-color: #eee;
    .bg_cover {
      color: #355d9a;
      margin: 20px auto;
      font-size: 66px;
      width: 100%;
      height: 1648px;
      background: url("../../../../../assets/report/1.jpg") no-repeat center;
      background-size: contain;
      position: relative;
      .bg_name {
        position: absolute;
        top: 22%;
        left: 46%;
        writing-mode: vertical-lr;
      }
      .bg_time {
        position: absolute;
        left: 30%;
        font-size: 36px;
        bottom: 20%;
      }
    }
    .model_title {
      width: 100%;
      height: 88px;
      background: url("../../../../../assets/report/ectitle.jpg") no-repeat
        center;
      background-size: cover;
      text-align: center;
      line-height: 88px;
      font-size: 42px;

      font-weight: bold;
      color: #000000;
    }
    .echart_card {
      width: 100%;
      padding: 2% 4.5%;
      overflow: hidden;
      .card_title {
        height: 70px;
        width: 100%;
        line-height: 70px;
        padding-left: 48px;
        font-size: 30px;
        background: #5ea9fd;
        border-radius: 15px 15px 0px 0px;
        font-weight: bold;
        color: #ffffff;
      }
      .echarts_data {
        width: 100%;
        // height: 550px;
        padding-top: 10px;
        background: #ffffff;
        // border-radius: 0px 0px 15px 15px;
        .wenzimiaoshu-parent {
          // margin-top: 100px;
          .wenzimiaoshu {
            font-size: 18px;
            line-height: 40px;
            padding-left: 200px;
            color: #5ea9fd;
            span {
              font-size: 30px;
              color: #5ea9fd;
            }
          }
        }
      }
      .chart_height {
        height: 300px;
      }
      .t4hp_height {
        box-sizing: border-box;
        padding: 10px 0 20px 0;
        height: 500px;
        width: 50%;
        float: left;
      }
      .t4hp_height1 {
        width: 50%;
        .t4hp_height1-center {
          text-align: center;
          font-size: 16px;
          color: #000;
        }
      }
      .cc_data {
        border-radius: 0px 0px 15px 15px;
        width: 100%;
        background: #ffffff;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 36px;
        font-weight: bold;
        color: #333333;
      }
      .table_data {
        padding-top: 22px;
      }
      p {
        color: #000000;
        font-size: 24px;
      }
    }

    //
    .bg_cover_jitai {
      padding: 2% 4.5%;
      .bg_cover_jitai-son {
        background: #fff;
        padding: 30px 20px;
        border-radius: 15px;
        font-size: 20px;
        .bg_cover_jitai-son1 {
          .soan-span {
            margin-left: 10px;
          }
        }
        .bg_cover_jitai-son2 {
          margin-top: 20px;
          .son2-son {
            margin-left: 19px;
          }
          .son2-son1 {
            margin-left: 0px;
          }
        }
      }
    }
    .sbjtgs {
      padding: 20px 0;
      background: #fff;
      font-size: 20px;
      text-align: center;
    }
    .echart_card-son {
      background: #fff;
      padding: 2% 4.5%;
      .echart_card-thead {
        color: #000 !important;
        td {
          height: 40px;
          text-align: center;
          font-size: 16px;
        }
        th {
          font-size: 20px;
        }
      }
    }
  }
}

.table-main {
  background: #fff;
  padding: 30px;
}
/deep/.el-table td.is-center,
.el-table th.is-center {
  font-size: 18px;
}
</style>
